<template>
  <view class="page">
    <image
      v-for="item in urlList"
      :key="item"
      mode="widthFix"
      style="width: 100vw"
      class="image"
      :show-menu-by-longpress="true"
      :src="getShowImage(item)"
      @click="imageClick"
    ></image>
    <view class="btn" @click="btnClick" v-if="btnText">{{ btnText }}</view>
  </view>
</template>

<script>
import { getShowImage, showModal } from "@/utils"
import persistence from "@/store/persistence"
import shareInfo from "@/utils/shareInfo"
import request from "@/utils/request"
import { getShowNginxPicUrl } from "@/utils/settings"

export default {
  data() {
    return {
      urlList: [], // 图片地址
      btnText: "", // 按钮文字
      jumpPath: "", // 跳转路径
      jumpType: "", // 跳转类型
      appId: "", //第三方的小程序id
      pageTitle: "", //页面标题
      btnClickEvent: "jumpPath", // 按钮按下后触发的事件，jumpPath:跳转页面，joinActivity:加入活动
      activityId: "", //活动id
			shareInfo: {
				title: null, // 分享标题
				imageUrl: null, // 分享图片
			}
    }
  },
  onLoad(query) {
    query.urlList && (this.urlList = JSON.parse(decodeURIComponent(query.urlList)))
    query.urlPrefixList && this.urlList.push(...JSON.parse(decodeURIComponent(query.urlPrefixList)).map((item) => getShowNginxPicUrl(item)))
		
    query.btnText && (this.btnText = query.btnText)
    query.jumpPath && (this.jumpPath = decodeURIComponent(query.jumpPath))
    query.jumpType && (this.jumpType = query.jumpType)
    query.appId && (this.appId = query.appId)
		query.shareInfo && (this.shareInfo = JSON.parse(decodeURIComponent(query.shareInfo)))
    //动态设置页面标题
    query.pageTitle && uni.setNavigationBarTitle({ title: query.pageTitle })
    //页面加载时触发事件
    if (query.onCreateEvent) {
      switch (query.onCreateEvent) {
        // 将新用户领福利弹窗标记为领过了，下一次进到首页不再弹
        case "setNewUserWelfareDialog":
          persistence.newUserWelfareDialog.set(true)
          break
      }
    }
    //按钮点击触发的事件
    if (query.btnClickEvent) {
      this.btnClickEvent = query.btnClickEvent
    }
    //活动id
    if (query.activityId) {
      this.activityId = query.activityId
    }
  },
  methods: {
    getShowImage,
    imageClick() {
      if (this.btnText) return
      this.btnClick()
    },
    //跳转页面
    handleJumpPath() {
      if (!this.jumpPath) return
      switch (this.jumpType) {
        //跳转到当前小程序的页面
        case "jumpPage":
          uni.redirectTo({
            url: this.jumpPath,
          })
          break
        //以 reLaunch 的方式跳转
        case "reLaunchPage":
          uni.reLaunch({
            url: this.jumpPath,
          })
          break
        //跳转到h5页面
        case "jumpH5":
          uni.navigateTo({
            url: "/pages/web-view/web-view?path=" + encodeURIComponent(this.jumpPath),
          })
          break
        //跳转到第三方小程序
        case "jumpMiniProgram":
          uni.navigateToMiniProgram({
            appId: this.appId,
            path: this.jumpPath,
            success: function (res) {
              console.log("success", res)
            },
            fail: function (err) {
              console.log("fail", err)
            },
          })
          break
      }
    },
    async btnClick() {
      //页面跳转
      if (this.btnClickEvent === "jumpPath") {
        this.handleJumpPath()
        //参与活动
      } else if (this.btnClickEvent === "joinActivity") {
        request({
          url: "posterActivityUser/joinActivity",
          data: {
            activityId: this.activityId,
          },
          errorHandle: true,
          showLoading: true,
        }).then(() => {
          showModal({
            title: "提示",
            content: "加入成功",
            showCancel: false,
          }).then(() => {
            this.handleJumpPath()
          })
        })
      }
    },
  },
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
			title: this.shareInfo.title,
			imageUrl: getShowNginxPicUrl(this.shareInfo.imageUrl),
		})
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20vh);
}
.image {
  display: flex;
  flex-wrap: wrap;
}
.btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 10vh);
  //bottom: calc(env(safe-area-inset-bottom) + 70rpx);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #f86103;
  color: #fff;
  border-radius: 50rpx;
  width: max-content;
  z-index: 9999;
}
</style>
